<template>
  <div>
    <el-table :data="queryList" style="width: 100%" stripe border height="50vh">
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="code" label="代码" />
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="remarks" label="备注" />
      <el-table-column label="操作">
        <template #default="{row}">
          <el-link type="primary" @click="editList(row)">修改</el-link>
          <el-link type="danger" @click="deleList(row)">删除</el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="pages.page"
      :page-sizes="[10, 15, 20, 25]"
      :page-size="pages.listRows"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 植物 -->
    <el-dialog
      title="修改植物部位代码"
      :visible.sync="dialogVisible2"
      width="40%"
    >
      <div>
        <el-form ref="addRef2" :model="editFrom2" :rules="editrules2" label-width="70px" class="demo-ruleForm">

          <div class="botany-box">
            <div class="box">
              <el-form-item label="代码：" prop="code">
                <el-input v-model="editFrom2.code" type="number" />
              </el-form-item>
            </div>
            <div class="box">
              <el-form-item label="名称：" prop="name">
                <el-input v-model="editFrom2.name" />
              </el-form-item>
            </div>
          </div>
          <el-form-item label="备注：">
            <el-input v-model="editFrom2.remarks" type="textarea" />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="botanySure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { data2Api, addBotany, deleBotanyApi } from '@/api/UnderlyingData'
export default {
  data() {
    return {
      heigth: (window.innerHeight) * 0.65,
      dialogVisible2: false,
      // 主体数据
      pages: {
        page: 1,
        listRows: 10
      },
      queryList: [],
      total: null,
      // 植物代码
      editFrom2: {
        id: 0,
        // 名称
        name: '',
        // 部位代码
        code: '',
        // 备注
        remarks: ''
      },
      // 植物代码表单验证
      editrules2: {
        name: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getdata2Api()
  },
  methods: {
    // 表格数据
    async getdata2Api() {
      const res = await data2Api(this.pages)
      console.log(res)
      this.queryList = res.data
      this.total = res.count - 0
    },
    // 分页处理
    handleSizeChange(newSize) {
      this.pages.listRows = newSize
      this.getdata2Api()
    },
    handleCurrentChange(newNum) {
      this.pages.page = newNum
      this.getdata2Api()
    },
    editList(row) {
      this.dialogVisible2 = true
      console.log(row)
      this.editFrom2.id = row.id
      this.editFrom2.name = row.name
      this.editFrom2.code = row.code
      this.editFrom2.remarks = row.remarks
    },
    // 植物表单确定提交
    async botanySure() {
      this.$refs.addRef2.validate(async(valid) => {
        if (!valid) return false
        await addBotany(this.editFrom2)
        this.getdata2Api()
        this.dialogVisible2 = false
        this.$message.success('修改成功！')
      })
    },
    // 删除植物
    async  deleList(row) {
      const prve = await this.$confirm('此操作将永久, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (prve !== 'confirm') return this.$message.info('已取消删除')
      await deleBotanyApi({ id: row.id })
      this.$message.success('删除成功！')
      this.getdata2Api()
    }
  }
}
</script>

<style lang="scss" scoped>
.el-link {
  margin-right: 10px;
}
.el-pagination{
  margin-top: 20px;
}
</style>
